<template>
    <!--扫码跳转任务-->
    <section class="section">
        <div>
            <mt-header title="点位详情" class="header">
                <span slot="left">
                    <mt-button icon="back" @click="$router.back()"></mt-button>
                </span>
                <span slot="right" @click="History">
                    历史记录
                </span>
            </mt-header>
        </div>
        <section class="content">
            <div class="con">
                <ul>
                    <li><span>点位{{index}}:</span></li>
                </ul>
                <ul>
                    <li><span>测量时间：</span><span>{{detialData.createdTime}}</span></li>
                    <li><span>点位总体测量结果：</span><span>{{detialData.prop == '100'?'合格':'不合格'}}</span></li>
                </ul>
                <ul>
                    <li style="display:block;" v-for="(list,index) in typeList" :key="index">
                        <p><span>{{list}}：</span></p>
                        <section class="table">
                            <table border="1" bordercolor="#D9D9D9" class="table">
                                <thead>
                                <tr>
                                    <th>实测内容</th>
                                    <th>测量数据</th>
                                    <th>测量结果</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,sql) in handtype(list,detialData.messageList)" :key="sql">
                                        <td>{{item.content}}</td>
                                        <td>{{item.value}}</td>
                                        <td>{{item.result==1?'合格':'不合格'}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </section>
                    </li>
                </ul>
            </div>
        </section>
    </section>
</template>

<script>
    export default {
        name: "task",
        data () {
            return{
                detialData:{},
                typeList:[],
                index:1,
            }
        },
        created () {
            let params = this.$A.GUP()
            if(params.id){
                let obj = {taskId:params.id,point:params.left+','+params.top,areaId:params.areaId}
                sessionStorage.setItem('point',JSON.stringify(obj))
                this.getDetail(obj)
                this.index = params.index
            }
        },
        methods:{
            History () {
                this.$router.push({
                    path:'/historyTask'
                })
            },
            //获取详情
            getDetail(obj){
                this.$A.Go('post','/safety/measureTask/getErCodePoint',obj).then(success=>{
                    if(success.code == 200){
                        this.detialData = success.body;
                        // this.pointList = this.handPoint(success.body.point)
                        // this.mapurl = success.body.photoUrl  typeList
                        let arr = success.body.messageList || []
                        for(let i=arr.length;i--;){
                            if(!this.typeList.includes(arr[i]['subentryName'])){
                                this.typeList.push(arr[i]['subentryName'])
                            }
                        }
                        console.log(this.typeList)
                    }else{
                        this.$A.MS(success.msg,'error')
                    }
                    
                },function(err){
                    console.log(err)
                })
            },
            handtype(str,data=[]){
                return data.filter(o=>o.subentryName == str)
            },
        },
        beforeDestroy () {
            sessionStorage.removeItem('point')
        }
    }
</script>

<style scoped lang="scss">
    .section {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
            overflow: auto;
            padding: 0.1rem 0;
            .con {
                display: flex;
                flex-direction: column;
                padding: 0.1rem;
                .table {
                    width: 100%;
                    height: auto;
                    border: 0.01rem solid #6E6E6E;
                    font-size: 0.12rem;
                    line-height: 0.2rem;
                    .tr {
                        width: 100%;
                        border-bottom: 0.01rem solid #6E6E6E;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .td {
                            border-left: 1px solid #dedede;
                            width: 100%;
                            text-align: center;
                            .tr {
                                border-bottom: 1px solid #dedede;
                                border-left: none;
                            }
                            > .tr:last-child {
                                border: none;
                            }
                        }
                        > .td:first-child {
                            border: none;
                        }
                        .tr {
                            border-left: 1px solid #dedede;
                        }
                    }
                    > .tr:last-child {
                        border: none;
                    }
                    .header {
                        background-color: #ddd;
                        color: #000;
                    }
                    .subheader {
                        background-color: #eee;
                        color: #333;
                    }
                }
                ul {
                    background: white;
                    width: 100%;
                    height: 100%;
                    list-style: none;
                    padding: 0.12rem;
                    margin: 0.01rem 0;
                    overflow: hidden;
                    font-size: 0.12rem;
                    li {
                        display: flex;
                        justify-content: space-between;
                        padding: 0.1rem 0;
                    }
                }
            }
        }
    }
</style>
